{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<link rel="stylesheet" href="{% static 'pear_layui/component/layui/css/layui.css' %}">
<style type="text/css">
    #myDiagramDiv {
        background-color: #F8F8F8;
        border: 1px solid #aaa;
    }
</style>
<body>
<div class="main" style="display: flex">
    <div class="left-cube-tree" style="width: 20%;">
        <div id="demoTree"></div>
    </div>
    <div class="right-e-r">
        <iframe scrolling="no" style="width: 1400px;height: 800px;" id="e-r-iframe" src="" frameborder="0"></iframe>
    </div>
</div>
</body>
<link href="{% static 'pear_layui/component/pear/css/pear.css' %}" rel="stylesheet">
<script src="{% static 'pear_layui/component/layui/layui.js' %}"></script>
<script src="{% static 'pear_layui/component/pear/pear.js' %}"></script>
<script src="{% static 'js/jquery.min.js' %}" type="text/javascript" charset="utf-8"></script>
<script>
    $.ajax({
        url: "{% url 'Cube-Tree-API' %}",
        method: "get",
        success: function (r) {
            layui.use('tree', function () {
                var tree = layui.tree;
                //渲染
                var inst1 = tree.render({
                    elem: '#demoTree'  //绑定元素
                    , data: r.data
                    , click: function (obj) {
                        console.log(obj.data); //得到当前点击的节点数据
                        if (obj.data.id.search("cube") != -1) {
                            $('#e-r-iframe').attr('src', 'http://127.0.0.1:8000/cube_api/cube-E-R/?cube_name='+obj.data.title);
                        }
                    }
                });
            });
        }
    })

</script>
</html>
